<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
								style="width: 160px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="部门/门店">
							<cl-cascader
								clearable
								v-model="search.dept_ids"
								:options="deptList"
								collapse-tags
								style="min-width: 230px"
								:props="{
									multiple: true,
									value: 'dept_id',
									label: 'dept_name'
								}"
								filterable
								@change="refresh()"
							/>
						</cl-filter>
						<cl-filter label="商品编号">
							<el-input
								v-model="search.number"
								placeholder="请输入商品编号"
								clearable
								style="width: 200px"
								@change="refresh"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-row type="flex">
							<el-button icon="el-icon-upload2" size="small" type="primary" @click="uploadTarget">
								上传出库明细
							</el-button>
						</el-row>
					</div>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="table">
				<cl-empty slot="empty" />
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-center">
						<el-button type="danger" @click="remove(row)"> 删除 </el-button>
					</div>
				</template>
			</cl-table>

			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<!-- 上传产品 -->
		<upload-target ref="wideuploadtarget" @confirm="refresh" />
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import { delEmptyChildren } from "@/utils";
import UploadTarget from "./components/upload-target";
export default {
	name: "erpSuppliserList",
	components: {
		UploadTarget,
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ type: "index", label: "#", align: "center", width: 60, fixed: true },
					{ label: "产品编号", prop: "product_number", width: 80 },
					{
						label: "产品名称",
						prop: "name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "部门",
						prop: "dept_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "规格",
						prop: "spe",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "库存",
						prop: "quantity",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "单价",
						prop: "unit_price",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "代理商",
						prop: "supplier",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					// { label: "操作", prop: "opt", width: 265, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				number: "",
				dept_ids: [], //部门id
			},
			deptList: [], //部门数据
			
			pageObj: {
				currentPage: 1,
				pageSize: 20
			}
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
		this.getDeptList();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.erp)
				.set("dict", {
					api: {
						page: "deptStock"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, render }) {
			const { list, pagination } = await next(params);
			console.log(await next(params));
			this.pageObj = {
				currentPage: pagination.page,
				pageSize: pagination.size
			};
			render(list);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		async init() {
			const { biz_id } = this.search;
			this.search.dept_ids = [];
		},
		// 删除
		remove({ id }) {
			this.confirm("是否执行此操作?")
				.then(async () => {
					await this.$service.erp.delProduct({ id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		//事业部切换
		changeBiz() {
			this.init();
			this.refresh();
			this.getDeptList();
		},
		uploadTarget() {
			this.$refs.wideuploadtarget.open();
		},
		uploadEnter() {
			this.$refs.wideuploadenter.open();
		},
		// 部门
		async getDeptList() {
			const { biz_id } = this.search;
			this.deptList = [];
			if (!biz_id) return;
			let data = await this.$service.dept.list({
				parent_id: 0,
				// is_store: 1,
				biz_id
			});
			delEmptyChildren(data);
			this.deptList = data;
		},
	}
};
</script>

<style lang="scss" scoped></style>
